<template>
<div>
<a-form :form="form">
                <a-row :gutter="0">
                    <a-col :key="1" :span="12">
                        <a-form-item label="上级菜单" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select
                                v-decorator="['pid']"
                                placeholder="请选择上级菜单"
                            >
                                <a-select-option v-for="v in menus" :key="v.id" :value="v.id">
                                    {{v.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="2" :span="12">
                        <a-form-item  label="菜单名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input placeholder="菜单名称" v-decorator="[
                                'name',
                                {
                                    rules: [{ required: true, message: '请输入菜单名称' }],
                                }
                            ]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :key="3" :span="12">
                        <a-form-item label="菜单路径" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input placeholder="菜单路径" v-decorator="[
                                'url',
                                {
                                    rules: [{ required: true, message: '请输入菜单路径' }],
                                },
                            ]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :key="4" :span="12">
                        <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <span slot="label">
                                菜单图标&nbsp;
                                <a href="https://vue.ant.design/components/icon-cn/" target="_blank">
                                    <a-tooltip title="点击进入页面复制图标">
                                        <a-icon type="question-circle-o" style="color: red"/>
                                    </a-tooltip>
                                </a>
                            </span>
                            <a-input placeholder="菜单图标" v-decorator="['icon']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :key="5" :span="12">
                        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select v-decorator="['status', {initialValue: 1}]">
                                <a-select-option :value="1">
                                    可用
                                </a-select-option>
                                <a-select-option :value="0">
                                    停用
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="6" :span="12">
                        <a-form-item label="是否为菜单" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select v-decorator="['is_menu', {initialValue: 1}]">
                                <a-select-option :value="1">
                                    是
                                </a-select-option>
                                <a-select-option :value="0">
                                    否
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :key="7" :span="24">
                        <a-form-item
                                label="备注"
                                :labelCol="{lg: {span: 4}, sm: {span: 4}}"
                                :wrapperCol="{lg: {span: 20}, sm: {span: 20} }">
                            <a-textarea
                                rows="4"
                                placeholder="请输入备注"
                                v-decorator="['remark']" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
</div>
</template>




<script>
    export default {
    	data(){
    		return {
        menus:[],
        form: this.$form.createForm(this),
    		labelCol:{lg: {span: 8}, sm: {span: 8}},
        wrapperCol:{lg: {span: 16}, sm: {span: 16}},
			 
    		}
    	},
    	mounted(){
    		this.http('get','menu/list').then(res=>{
          this.menus = res
        })
		  },
    	methods: {
		    onSubmit(form){
          this.form.validateFields((err, values) => {
                    if(!err){
                        this.postData(values).then(res=>{
                            if(res.id){
                                this.$message.success(res.msg, 1);
                                this.$emit("hideCreate");
                                this.$emit("getList");
                                this.form.resetFields();
                            }else{
                                this.$message.error(res.msg, 1);
                            }
                        })

                    }
                })
          
        },
        async postData(param){
          let data = await this.http('post','menu/create',param);
          return data;
        }
    	}
    
    
 }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
